<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--用户数据-->
			<el-col :span="24" :xs="24">
				<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
					label-width="68px">
					<el-form-item label="设备类型" prop="device">
						<el-select v-model="queryParams.type" placeholder="设备类型" clearable style="width: 140px">
							<el-option v-for="(type) in types" :key="type.value" :label="type.label"
								:value="type.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="选择日期">
						<el-date-picker v-model="queryParams.dateRange" style="width: 240px" value-format="yyyy-MM-dd"
							type="daterange" range-separator="-" start-placeholder="开始日期"
							end-placeholder="结束日期"></el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
					</el-form-item>
				</el-form>

				<el-row :gutter="10" class="mb8">
					<el-col :span="1.5">
						<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
							@click="handleDelete">删除</el-button>
						<!-- v-hasPermi="['system:user:remove']" -->
					</el-col>
					<el-col :span="1.5">
						<el-button type="warning" plain icon="el-icon-download" size="mini"
							@click="handleExport">导出</el-button>
						<!-- v-hasPermi="['system:user:export']" -->
					</el-col>
					<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"
						:columns="columns"></right-toolbar>
				</el-row>

				<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="50" align="center" />
					<!-- 遍历 clumns 定义列 -->
					<el-table-column v-for="column in columns" :key="column.key" :label="column.label"
						:prop="column.prop" align="center" v-if="column.visible" :show-overflow-tooltip="true"
						:sortable="column.sortable">
						<!-- 使用 slot-scope 来根据列类型进行不同的处理 -->
						<template slot-scope="scope">
							{{ scope.row[column.prop] }}
						</template>
					</el-table-column>

					<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" icon="el-icon-delete"
								@click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>

				<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
					:limit.sync="queryParams.pageSize" />

			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		getToken
	} from "@/utils/auth";
	
	// 引入JOSN结构
	import {
		types,
		defaultProps
	} from '@/structure/common.js';
	import {
		columns
	} from '@/structure/historyWarning.js';
	
	export default {
		name: "User",
		data() {
			return {
				// 遮罩层
				loading: false,
				// 选中数组
				ids: [],
				// 非单个禁用
				single: true,
				// 非多个禁用
				multiple: true,
				// 显示搜索条件
				showSearch: true,
				// 总条数
				total: 10,
				// 查询参数
				queryParams: {
					type: "charger",
					dateRange: "",
					pageNum: 1,
					pageSize: 10,
				},
				types: types,
				defaultProps: defaultProps,
				// 列信息
				columns: columns,
				// 设备表格数据
				dataList: [{
						"id": 1,
						"sn": "sn-0001",
						"name": "ups-0001",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 2,
						"sn": "sn-0002",
						"name": "ups-0002",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 3,
						"sn": "sn-0003",
						"name": "ups-0003",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 4,
						"sn": "sn-0004",
						"name": "ups-0004",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 5,
						"sn": "sn-0005",
						"name": "ups-0005",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 6,
						"sn": "sn-0006",
						"name": "ups-0006",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 7,
						"sn": "sn-0007",
						"name": "ups-0007",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 8,
						"sn": "sn-0008",
						"name": "ups-0008",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 9,
						"sn": "sn-0009",
						"name": "ups-0009",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
					{
						"id": 10,
						"sn": "sn-0010",
						"name": "ups-0010",
						"time": "2024-6-27",
						"code": "01",
						"type": "电压过高",
					},
				],
				// 表单校验
				rules: {
					userName: [{
							required: true,
							message: "用户名称不能为空",
							trigger: "blur"
						},
						{
							min: 2,
							max: 20,
							message: '用户名称长度必须介于 2 和 20 之间',
							trigger: 'blur'
						}
					],
				}
			};
		},
		watch: {
		},
		created() {
		},
		methods: {
			/** 查询用户列表 */
			getList() {
				// this.loading = true;
				// listUser(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
				// 	this.userList = response.rows;
				// 	this.total = response.total;
				// 	this.loading = false;
				// });
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				this.ids = selection.map(item => item.userId);
				this.single = selection.length != 1;
				this.multiple = !selection.length;
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const userIds = row.id || this.ids;
				this.$modal.confirm('是否确认删除ID编号为"' + userIds + '"的数据项？').then(function() {
					return delUser(userIds);
				}).then(() => {
					this.getList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			/** 导出按钮操作 */
			handleExport() {
				this.download('system/user/export', {
					...this.queryParams
				}, `user_${new Date().getTime()}.xlsx`)
			},
		}
	};
</script>